<template>
    <div>
        <el-card class="login-card">
            <div slot="header" class="clearfix">
                <span>Login</span>
            </div>
            <el-form :rules="rules" ref="loginForm" :model="loginForm" label-position="left" :label-width="loginForm.labelWidth">
                <el-form-item label="Account" prop="account">
                    <el-input prefix-icon="el-icon-user" v-model="loginForm.account" placeholder="Your Account" clearable></el-input>
                </el-form-item>
                <el-form-item label="Password" prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" placeholder="Enter Your Password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox label="Remember Password" v-model="loginForm.rem" name="rempass"></el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="isLoading" class="login-btn" type="primary" @click="login('loginForm')">Login</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import {api_login} from '../api/admin.js'


    export default {
        data () {
            var checkAccount = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('账号不能为空'))
                } else if (value.length < 5) {
                    return callback(new Error('账号不能小于5位'))
                } else {
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    callback()
                }
            };
            return {
                isLoading: false,
                loginForm: {
                    account: '',
                    password: '',
                    rem: false,
                    labelWidth: '80px'
                },
                rules: {
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    account: [
                        { validator: checkAccount, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            login(formName) {
                this.isLoading = true
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        this.$message.error('请按要求输入账号密码！');
                        this.isLoading = false
                        return false;
                    }
                    api_login(this.loginForm.account,this.loginForm.password).then(({data:res})=>{ //({data})为直接获取result里面的data值
                        const data = res.data;
                        this.isLoading = false
                        if (res.code!=200) {
                            this.$message.error(res.message)
                            return true
                        }
                        const token = data.tokenHead + data.token;
                        //保存token到sessionStorage
                        window.sessionStorage.setItem('token',token) //会话结束后，自动消除
                        //记住密码功能，登录将用户密码保存到cookies
                        if (this.loginForm.rem) {
                            this.$cookies.set('username',this.loginForm.account,'7D') //默认是一天
                            this.$cookies.set('password',this.loginForm.password,'7D')
                        } else {
                            this.$cookies.remove('username')
                            this.$cookies.remove('password')
                        }
                        //登录页面刷新或重新加载的时候从cookies中获取，在create()函数中
                        this.$router.replace('/home')
                    }).catch(err=>{
                        //请求出错，如服务找不到，或者服务bug
                        console.log(err)
                    })
                });
            }
        },
        created() {
            //获取cookies中的值
            this.loginForm.account = this.$cookies.get('username')
            this.loginForm.password = this.$cookies.get('password')
        }
    }
</script>

<style>
    .login-card {
        width: 480px;
        margin: auto;
        transform: translateY(50%);
    }
    .login-btn {
        width: 100%;
    }
</style>
